<template>
	<view class="main">
		<view class="top">
			<view class="logo">
				<image src="/static/img/logo.png" mode="widthFix"></image>
			</view>
			<view class="login iconfont icon-user" v-if="!nickName" @click="goLoginPage">请登录</view>
			<view class="login" v-else>{{ nickName }} 欢迎您！</view>
		</view>
		<view class="slide">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/img/sw01.png" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/img/sw02.png" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/img/sw03.png" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav">
			<view @click="goHotPage">
				<icon class="iconfont icon-car"></icon>
				<text>整车热卖</text>
			</view>
			<view @click="goPartsPage">
				<icon class="iconfont icon-hot"></icon>
				<text>热卖配件</text>
			</view>
			<view>
				<icon class="iconfont icon-shop"></icon>
				<text>线下门店</text>
			</view>
			<view>
				<icon class="iconfont icon-periphery"></icon>
				<text>文化周边</text>
			</view>
		</view>
		<view class="hot-sale">
			<view class="hd">整车热卖</view>
			<view class="pic">
				<image src="/static/img/n1s.jpg" mode="widthFix"></image>
			</view>
			<view class="car-list">
				<view class="item" v-for="(item,index) in dataSource.goodsList" :key="item.id"
					@click="goDetailPage(item)">
					<image :src="IMG_URL + item.goodsImg" mode="widthFix"></image>
				</view>
				<view class="more" @click="moreEvent" v-if="showMore">加载更多 ↓</view>
			</view>

			<view class="hd">热卖配件</view>
			<view class="item" v-for="(item,index) in dataSource.partsList" :key="item.id" @click="goDetailPage(item)">
				<image :src="IMG_URL + item.goodsImg" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		IMG_URL,
		BASE_URL
	} from "@/config/index.js"

	const pageIndex = ref(1)
	const pageSize = ref(4)
	const pageIndex2 = ref(1)
	const pageSize2 = ref(2)
	const dataSource = reactive({
		goodsList: [],
		partsList: [],
	})
	const showMore = ref(true)
	const nickName = ref('')

	const goHotPage = () => {
		uni.navigateTo({
			url: '/pages/otherPages/hot'
		})
	}

	const goPartsPage = () => {
		uni.navigateTo({
			url: '/pages/otherPages/parts'
		})
	}

	const goLoginPage = () => {
		uni.navigateTo({
			url: '/pages/otherPages/login'
		})
	}

	const goDetailPage = ({
		_id
	}) => {
		uni.navigateTo({
			url: '/pages/otherPages/detail?id=' + _id
		})
	}

	const getCarList = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})

		uni.request({
			url: `${BASE_URL}goodslist`,
			data: {
				type: 1,
				pageIndex: pageIndex.value,
				pageSize: pageSize.value
			},
			method: "GET",
			success: res => {
				const {
					data
				} = res.data
				if (data.length === 0) {
					showMore.value = false
					uni.showToast({
						icon: 'none',
						title: '没有更多了'
					})
				}
				dataSource.goodsList = [...dataSource.goodsList, ...data]
			},
			complete: () => {
				uni.hideLoading()
				uni.hideToast()
				uni.stopPullDownRefresh()
			}
		})
	}

	const getPartsList = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		uni.request({
			url: `${BASE_URL}goodslist`,
			data: {
				type: 2,
				pageIndex: pageIndex2.value,
				pageSize: pageSize2.value
			},
			method: "GET",
			success: res => {
				const {
					data
				} = res.data
				if (data.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '没有更多了'
					})
				}
				dataSource.partsList = [...dataSource.partsList, ...data]
			},
			complete: () => {
				uni.hideLoading()
				uni.hideToast()
				uni.stopPullDownRefresh()
			}
		})
	}

	const moreEvent = () => {
		pageIndex.value++
		getCarList()
	}

	onShow(() => {
		const {
			nickname
		} = uni.getStorageSync('USER_TOKENS') || {}
		nickName.value = nickname
	})

	onReady(() => {
		getCarList()
		getPartsList()
	})

	onPullDownRefresh(() => {
		pageIndex.value = 1
		pageIndex2.value = 1
		dataSource.goodsList = []
		dataSource.partsList = []
		showMore.value = true
		getCarList()
		getPartsList()
	})

	onReachBottom(() => {
		pageIndex2.value++
		getPartsList()

	})
</script>
<style lang="scss" scoped>
	.main {
		background: #f0f0f0;

		image {
			width: 100%;
		}
	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #f8f8f8;
		box-sizing: border-box;
		padding: 10upx 20upx;
		color: #999;

		.logo {
			width: 250upx;
			height: 54upx;
			overflow: hidden;
		}

		.login {
			font-size: 28upx;
			vertical-align: middle;
		}

		.icon-user::after {
			content: '\e60a';
			font-size: 50upx;
			padding-left: 10upx;
			vertical-align: middle;
		}
	}

	.slide {
		width: 100%;
		height: 300upx;

		image {
			height: 300upx !important;
		}
	}

	.nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		background: #f8f8f8;
		box-sizing: border-box;
		padding: 20upx;

		icon {
			display: block;
			font-size: 60upx;
			color: #b10936;
		}

		text {
			color: #df0b47;
		}
	}

	.hot-sale {
		.pic image {
			height: 360upx;
		}

		.item {
			margin-bottom: 10upx;
		}

		.more {
			text-align: center;
			background: #fff;
			font-size: 24upx;
			color: #999;
			margin-top: -15upx;
			padding: 24upx 0;
			margin-bottom: 20upx;
		}
	}

	.hd {
		font-weight: bold;
		font-size: 36upx;
		padding: 20upx 15upx;
		color: #a90738;
		margin: 10upx 0;
		background: #fff;
		border-bottom: 1upx solid #efefef;
	}

	// nav icon
	.icon-car::before {
		content: '\e630';
	}

	.icon-hot::before {
		content: '\e633';
	}

	.icon-shop::before {
		content: '\e682';
	}

	.icon-periphery::before {
		content: '\e631';
	}
</style>